<template>
  <div class="notice-page page">
    <nav-bar title="党建活动" theme="red" search></nav-bar>
    <div class="notice-detail-banner" v-if="flag">
      <img :src="$config.ImageURl + detailData.imageUrl" />
    </div>
    <div :class="[flag ? 'isbanner' : 'notice-detail-title']">
      {{ detailData.name }}
    </div>
    <div :class="[flag ? 'notice-detail-divisionMargin' : 'notice-detail-division']"></div>
    <div class="notice-detail-user">
      <span class="notice-detail-user-name">{{ detailData.publishPersonName }}</span>
      <span class="notice-detail-user-time">{{ detailData.publishTime }}</span>
    </div>
    <div class="act-detail-list">
      <div v-for="(item, index) in detailFields" :key="index" class="act-detail-item">
        <div class="act-detail-label-wrap">
          <div class="act-detail-label">
            <em class="act-detail-red-dot"></em>
            {{ item.label }}
          </div>
        </div>
        <div class="act-detail-text ql-editor" v-html="item.text"></div>
      </div>
    </div>
    <div class="act-detail-btn" v-if="detailData.status === '2'">
      <van-button
        v-if="detailData.personCount == 0 || detailData.personCount > 0"
        block
        type="danger"
        native-type="button"
        :loading="button.loading"
        :disabled="button.disabled"
        @click="btnClickHandler"
      >
        {{ button.text }}
      </van-button>
    </div>
  </div>
</template>
<script>
import partyBuilding from '@/api/partyBuilding'
export default {
  components: {},
  data() {
    return {
      detailData: {},
      imgUrl: '',
      flag: false,
      curCode: '',
      button: {
        disabled: false,
        loading: false,
        text: '报名'
      },
      timer: null,
      detailFields: [
        {
          label: '活动类型',
          text: ''
        },
        {
          label: '简介',
          text: ''
        },
        {
          label: '活动时间',
          text: ''
        },
        {
          label: '活动地点',
          text: ''
        }
      ]
    }
  },
  created() {
    this.curCode = this.$route.query.code
    this.getDetail()
  },
  methods: {
    // 详情
    getDetail() {
      partyBuilding.Activity.detail({ code: this.curCode }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.detailData = data
          this.detailFields[0].text = data.typeName
          this.detailFields[1].text = data.activityDetail
          this.detailFields[2].text = data.activityStartTime + '~' + data.activityEndTime
          this.detailFields[3].text = data.site
          if (data.personCount === 0) {
            this.button.text = '报名'
          } else {
            this.button.text = '取消报名'
          }
        }
        this.flag = this.detailData.imageUrl !== ''
      })
    },
    btnClickHandler() {
      if (this.button.text === '报名') {
        partyBuilding.Activity.entry({ code: this.curCode }).then(res => {
          if (res.data.status === 0) {
            this.$toast.success('报名成功')
            this.button.text = '已报名'
            this.button.disabled = true
            this.timer = setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          } else {
            this.$toast.fail('报名失败')
          }
        })
      } else if (this.button.text === '取消报名') {
        partyBuilding.Activity.cancel({ code: this.curCode }).then(res => {
          if (res.data.status === 0) {
            this.$toast.success('取消报名成功')
            this.button.disabled = true
            this.timer = setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          } else {
            this.$toast.fail('取消报名失败')
          }
        })
      }
    }
  },
  destroyed() {
    clearTimeout(this.timer)
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/notice/detail.less';
@import '~@/assets/style/partyBuilding/Activity/detail.less';
</style>
